#index{

  $logoHeight:125px;//logo的高度
  $logoWidth:300px;//logo的宽度
  $navHeight:50px;//导航条的高度

  $liBaseTop:130px;//选项栏距离顶部的高度
  $baseLeft:170px;//选项栏和logo图标距离左侧的宽度
  $liSpacing:40px;//两个选项栏之间的距离
  $liWidth:120px;//选项栏的宽度
  $liHeight:40px;//选项栏的高度

  $exitLeft:1400px;//安全退出选项距离右侧的宽度

  $aNavColor:white;//导航栏的连接颜色
  $baseLetterSpacing:2px ！default;//字间距

  @mixin p ($text-align:center,$line-height:100%){
    text-align:$text-align;
    line-height: $line-height;
  }

  @mixin position($position,$top,$left){
    position: $position;
    top: $top;
    left:$left;
  }

  //计算li的绝对位置
  @function queryLeftSpacing($number,$baseLeft,$liWidth,$liSpacing){
    @return $baseLeft+(($number)-1)*($liWidth+$liSpacing);
  }


  margin: 0;
  padding:0;
  overflow-x: hidden;

  body {
    //盒模型计算宽高不会包含阴影，需要通过margin或者padding给它腾出渲染空间
    margin: 1px 0 0 0 ;

    //头部：logo和导航栏
    .header{
      width:100%;
      .background{
        width:100%;
        height:$logoHeight;
        background-color: rgba(248,248,247,1);
        .logo{
          @include position(absolute,0,$baseLeft);
          height:($logoHeight)*0.70;
          width:$logoWidth;//logo图片的宽度
        }
        p{
          @include p(center,100%);
          @include position(absolute,($logoHeight)*0.7,0);
          margin:0;
          //p左侧的绝对定位也是以他的上一个position元素定位的，不管这个元素是他的父亲还是兄弟
          height:($logoHeight)*0.30;
          //p宽度所占的百分比是以他的上一个position元素定位的，不管这个元素是他的父亲还是兄弟
          width:100%;

          color:darkgrey;
        }
      }

      .nav{
        @include position(absolute,$logoHeight,0);
        width:100%;
        height: $navHeight;
        background-color:red;
        box-shadow: 6px 6px 6px grey,
                    inset 3px 8px 23px 16px rgba(2, 2, 5, 0.1),
                    inset -3px -8px 23px 16px rgba(2, 2, 5, 0.1);

        a{
          color:$aNavColor;
          font-weight:600;
          letter-spacing: $baseLetterSpacing;

          li{
            position:absolute;
            top:(($navHeight)-($liHeight))/2.0;
            width:$liWidth;
            height:$liHeight;
            list-style: none;
            p{
              @include p(center,100%);
              margin-top:10%;//为什么这个时候p的居中显示失去作用了呢？
            }
            &:hover{
              cursor: pointer;
              background-color: #ff3b49;
              box-shadow:
                          inset 3px 8px 23px 16px rgba(2, 2, 5, 0.1),
                          inset -3px -8px 23px 16px rgba(2, 2, 5, 0.1);

            }
            transition: 0.2s;
          }

        }
        #shouye{
          left:queryLeftSpacing(1,$baseLeft,$liWidth,$liSpacing);
        }
        #lock{
          left:queryLeftSpacing(2,$baseLeft,$liWidth,$liSpacing);
        }
        #car{
          left:queryLeftSpacing(3,$baseLeft,$liWidth,$liSpacing);
        }
        #graduate{
          left:queryLeftSpacing(4,$baseLeft,$liWidth,$liSpacing);
        }

        .exit{
          position:absolute;
          left:$exitLeft;
          top:(($navHeight)-($liHeight))/2.0;
          height:$liHeight;
          width:$liWidth;

          a{
            display:block;
            color:$aNavColor;
            text-decoration: none;
            font-weight:200;
            font-size:14px;

            &:hover{
              text-decoration: underline;
            }
          }

          p{
            @include p(center,100%);
            margin-top:10%;//为什么这个时候p的居中显示失去作用了呢？
          }
        }
      }
    }


    //内容区：轮播图和平台应用介绍
    .content{

      position:absolute;
      top: ($logoHeight)+($navHeight);


      $appBasePosition:280px;//平台应用介绍距离左侧的距离
      $appBaseWidth:340px;//平台应用介绍距离左侧的距离
      $appBaseSpacing:10px;//平台应用介绍间距

      @mixin appIntroStyle{//平台应用介绍样式
        position:absolute;
        width:$appBaseWidth;
        //border:1px solid black;
      }
      .appIntro{
        margin-top:20px;
        .lock{
          @include appIntroStyle;
          left:queryLeftSpacing(1,$appBasePosition,$appBaseWidth,$appBaseSpacing);
        }
        .car{
          @include appIntroStyle;
          left:queryLeftSpacing(2,$appBasePosition,$appBaseWidth,$appBaseSpacing);
        }
        .graduate{
          @include appIntroStyle;
          left:queryLeftSpacing(3,$appBasePosition,$appBaseWidth,$appBaseSpacing);
        }


        .title{
          padding-top: 3%;
          height:30px;
          width:$appBaseWidth;
          background-color:red;
          box-shadow: 4px 4px 10px grey,
          inset 3px 8px 23px 16px rgba(2, 2, 5, 0.1),
          inset -3px -8px 23px 16px rgba(2, 2, 5, 0.1);
          border-radius: 4px 4px 0 0;
          p{
            //height:100%;
            //width:100%;
            color:white;
            text-align: left;
            padding-left:10%;
          }
        }

        .intro{
          height:190px;
          width:99.4%;
          border:1px solid grey;
          background-color:rgba(248,248,247,1);

          p{
            padding:4% 10% 4% 10%;
          }
        }
      }
    }
  }
}
